import styled from "styled-components";

export const HomeWrapper = styled.div`
  /* display: flex;
  justify-content: center; */
  > div{
    border: 1px solid red;
  }
  
  .content{
    /* display: flex; */
    width: 1032px;
    border: 1px solid;
    position: relative;
    margin-left: 50px;
 
    .right{
      cursor: pointer;
      position: absolute;
      right: -15px;
      top:-2px;
      z-index: 9;
    }
    
    .left{
      cursor: pointer;
      position: absolute;
      left: -15px;
      top:-2px;
      z-index: 9;
    }
    .cpn{
      overflow: hidden;
    }
    .list{
      display: flex;
      transition: transform 300ms ease;
      .item{
        flex-basis: 120px;
        flex-shrink: 0;
        margin-right: 8px;
      }
      .active{
        flex-basis: 120px;
        flex-shrink: 0;
        margin-right: 8px;
        color: #fff;
        background: ${props => props.bgcolor};
      }
    }

  }
`